<template>
    <div class="page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table ref="table" :data="data">
                    <el-table-column label="教师名称" prop="name"/>
                    <el-table-column label="登录账号" prop="account"/>
                    <el-table-column label="密码" prop="plain_psw"/>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onShowDialog(row.id)">绑定勋章课程</el-button>
                            <el-button type="text" @click="onLog(row.id)">日志详情</el-button>
                            <el-button type="text" @click="onAddClick(row)">编辑</el-button>
                            <el-button class="red-color" type="text" @click="onDeleteClick(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer mt-4 text-center">
                <el-pagination
                    class="center"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog :visible.sync="visible" width="70%">
            <el-button type="primary" @click="onBindCourse">确 定</el-button>
            <div class="course-content mt-4" v-loading="loading">
                <div class="course-item flex flex-wrap">
                    <div :class="[
                        'item', 'flex', 'items-center',
                        'cursor-pointer', hasItem(item.id) && 'active'
                    ]"
                        v-for="item in dialogList"
                        :key="item.id"
                        @click="selectionTeacher(item.id)">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div slot="footer" v-if="dialogForm.total">
                <el-pagination
                    class="center"
                    @current-change="fetchCourse"
                    :current-page.sync="dialogForm.page"
                    :page-size.sync="dialogForm.size"
                    layout="total, prev, pager, next, jumper"
                    :total="dialogForm.total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            visible: false,
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 25,
            },
            totalElements: 0,

            dialogList: [],
            dialogSelectList: [],
            dialogForm: {
                page: 1,
                size: 12,
                total: 0,
            },
            teacherId: '',
        };
    },
    watch: {
        visible(val) {
            if (!val) {
                this.teacherId = '';
                this.dialogSelectList = [];
            }
        },
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        fetchData() {
            this.loading = true;
            API.get('course-teacher/page', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },

        onAddClick(row) {
            const params = row && row.id ? { id: row.id } : undefined;
            this.$router.push({
                name: 'Teacher.Account.Form',
                params,
            });
            if (params) {
                sessionStorage.setItem(`TeacherAccount${row.id}`, JSON.stringify(row));
            }
        },

        onDeleteClick(row) {
            $ele.$confirm('是否删除此此帐号？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`course-teacher/${row.id}`).then(() => {
                    this.fetchData();
                    $ele.$message.success('删除成功');
                }).finally(() => this.loading = false);
            }).catch();
        },

        onLog(id) {
            this.$router.push({
                name: 'Teacher.Account.Log',
                params: {id},
            });
        },

        fetchCourse() {
            this.loading = true;
            API.get('merit_course/page', { params: this.dialogForm }).then((res) => {
                this.dialogList = res.content;
                this.dialogForm = res.pagination;
            }).finally(() => this.loading = false);
        },

        fetchSelectCourse(id) {
            this.loading = true;
            API.get(`course-teacher/course/${id}`).then((res) => {
                const arr = res || [];
                for (const item of arr) {
                    this.dialogSelectList.push(item.course_id);
                }
            }).finally(() => this.loading = false);
        },

        onBindCourse() {
            API.post('course-teacher/course', {
                admin_id: this.teacherId,
                course_ids: this.dialogSelectList,
            }).then(() => {
                $ele.$message.success('绑定成功');
            });
        },

        onShowDialog(id) {
            this.visible = true;
            this.teacherId = id;
            this.fetchSelectCourse(id);
        },

        selectionTeacher(e) {
            const teacherArr = this.dialogSelectList || [];
            if (!teacherArr.length) {
                teacherArr.push(e);
            } else if (teacherArr.indexOf(e) > -1) {
                teacherArr.splice(teacherArr.indexOf(e), 1);
            } else teacherArr.push(e);
            this.dialogSelectList = teacherArr;
        },

        hasItem(id) {
            const arr = [];
            for (const item of this.dialogSelectList) {
                if (item === id) arr.push(item);
            }
            return !!arr.length;
        },
    },
    mounted() {
        this.fetchData();
        this.fetchCourse();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}

.course-item {
    width: calc(100% + 2%);

    .item {
        width: 23%;
        margin-right: 2%;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        box-shadow: 0 0 3px 1px rgb(240, 240, 240);
        border-radius: 4px;

        &:hover {
            box-shadow: 0 0 12px 2px rgb(220, 220, 220);
        }

        &.active {
            background: #409EFF;
            color: white;
        }
    }
}
</style>
